/**
 * v-hasPerm
 * 控制不同角色的权限
 * 接收参数：string类型/Ref<string>类型/Reactive<string>类型
 */
import type { Directive, DirectiveBinding } from "vue";

interface ElType extends HTMLElement {
  __handleClick__: any;
}
const directive: Directive = {
  // mounted是指令的一个生命周期
  mounted(el: ElType, binding: DirectiveBinding) {
    // value 获取用户使用自定义指令绑定的内容
    const { value } = binding;

    // 获取用户所有的权限按钮
    const permissionBtn = JSON.parse(sessionStorage.getItem("rolesList")!);
    // 判断用户使用自定义指令，是否使用正确了
    if (value && value instanceof Array && value.length > 0) {
      const permissionFunc = value;
      //判断传递进来的按钮权限，用户是否拥有
      //Array.some(), 数组中有一个结果是true返回true，剩下的元素不会再检测
      const hasPermission = permissionBtn.some((role: any) => {
        return permissionFunc.includes(role);
      });
      console.log("hasPermission", hasPermission);

      // 当用户没有这个按钮权限时，设置隐藏这个按钮
      if (!hasPermission) {
        el.style.display = "none";
      }
    } else {
      throw new Error("need roles! Like v-permission=\"['admin','editor']\"");
    }
  },
};

export default directive;
